<template>
	<view class="search-organizations-or-doctors">
		<!-- 搜索 -->
		<view class="search-box">
			<view class="searchBox">
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2326.png"
					class="searchImg" />
				<up-input class="search-input" placeholder="搜索机构/医生" placeholder-style="color: #999;" border="none"
					@confirm="onSearch" />
			</view>
			<navigator url="/pages/home/home" hover-class="none" open-type="switchTab" class="cancel-btn">返回</navigator>
		</view>
		<!-- 搜索结果：没数据 -->
		<view class="result-none-box" v-show="!organizationsData.length && !doctorsData.length && isShow">
			<image src="/static/u3462.svg"></image>
			<view class="tip-text">没有找到相关结果，换个关键字试试吧</view>
		</view>
		<!-- 搜索结果：机构有数据 -->
		<view class="result-organizations-box" v-show="organizationsData.length">
			<view class="title">机构</view>
			<view class="container">
				<navigator :url="`/homepackge/pages/organizationalPage/organizationalPage?_id=${item._id}`"
					hover-class="none" v-for="item in organizationsData" :key="item._id" class="item">
					<image :src="item.image"></image>
					<view class="info">
						<view class="name">{{ item.name }}</view>
						<view class="km">距您3.6km</view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 搜索结果：医生有数据 -->
		<view class="result-doctors-box" v-show="doctorsData.length">
			<view class="title">医生</view>
			<view class="container">
				<navigator :url="buildDoctorUrl(item)" hover-class="none" v-for="item in doctorsData" :key="item._id"
					class="item">
					<!-- <view class="item" v-for="item in doctorsData" :key="item._id"> -->
					<view class="avatar-box">
						<image :src="item.avatar"></image>
						<!-- <text class="tag">团队长</text> -->
					</view>
					<view class="info-box">
						<view class="info">
							<text class="name">{{ item.name }}</text>
							<text class="job-title ellipsis">{{ item.roleId?.name }}</text>
						</view>
						<view class="count">签约人数：<text class="number">{{ item.signNumber }}</text></view>
					</view>
					<!-- :url="`/homepackge/pages/apply-contract/apply-contract?organizationId=${item.organizationId?._id}&doctorId=${item._id}`" -->
					<navigator class="btn">
						签约
					</navigator>
					<!-- </view> -->
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from 'vue';
import {
	muSearchDoctorsApi,
	muSearchOrganizationsApi
} from '../../api/mu-search';

// 控制没数据样式是否显示
const isShow = ref(false);

// 机构数据
const organizationsData = ref([]);
// 医生数据
const doctorsData = ref([]);

// 事件：回车搜索
const onSearch = (inputValue) => {
	// 查询机构
	searchOrganizations(inputValue);
	// 查询医生
	searchDoctors(inputValue);
}

// 请求：查询一些机构数据
const searchOrganizations = async (value) => {
	const res = await muSearchOrganizationsApi({
		value
	});
	// console.log(res);
	if (res.code == 200) {
		organizationsData.value = res.data.rows;
	}
};

// 请求：查询一些医生数据
const searchDoctors = async (name) => {
	const res = await muSearchDoctorsApi({
		name
	});
	// console.log(res);
	if (res.code == 200) {
		doctorsData.value = res.data.rows;

		if (!isShow.value) {
			isShow.value = true;
		}
	}
};

// 获取医生的第一个团队ID
const getFirstTeamId = (doctor) => {
	// 如果医生有teamIds数组且不为空，返回第一个团队的ID
	if (doctor.teamIds && doctor.teamIds.length > 0) {
		// 如果teamIds是对象数组，返回第一个对象的_id
		if (typeof doctor.teamIds[0] === 'object' && doctor.teamIds[0]._id) {
			return doctor.teamIds[0]._id;
		}
		// 如果teamIds是字符串数组，直接返回第一个
		return doctor.teamIds[0];
	}

	// 如果有teamId字段（单个团队）
	if (doctor.teamId) {
		return typeof doctor.teamId === 'object' ? doctor.teamId._id : doctor.teamId;
	}

	// 如果没有团队信息，返回空字符串
	return '';
};

// 构建医生主页URL
const buildDoctorUrl = (doctor) => {
	let url = `/homepackge/pages/doctorshomepage/doctorshomepage?_id=${doctor._id}`;

	// 添加机构ID（如果存在）
	if (doctor.organizationId) {
		const orgId = typeof doctor.organizationId === 'object' ? doctor.organizationId._id : doctor.organizationId;
		url += `&orgId=${orgId}`;
	}

	// 添加团队ID（如果存在）
	const teamId = getFirstTeamId(doctor);
	if (teamId) {
		url += `&teamId=${teamId}`;
	}

	console.log('医生跳转URL:', url, '医生信息:', doctor);
	return url;
};
</script>

<style scoped lang="scss">
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

image {
	vertical-align: middle;
}

.search-organizations-or-doctors {
	width: 100%;
	min-height: 100vh;

	background-color: #F7FAFD;

	.result-none-box {
		text-align: center;
		font-size: 28rpx;
		color: #999;

		image {
			width: 264rpx;
			height: 200rpx;

			padding: 150rpx 0 50rpx;
		}
	}

	.title {
		margin: 30rpx;

		font-size: 40rpx;
		color: #333;
	}

	.result-organizations-box,
	.result-doctors-box {

		.container {
			width: calc(100% - 60rpx);

			margin: 0 30rpx;

			.item {
				display: flex;
				align-items: center;

				margin-bottom: 30rpx;
				padding: 30rpx;

				background-color: #fff;

				border-radius: 16rpx;

				image {
					width: 160rpx;
					height: 160rpx;

					margin-right: 30rpx;

					border-radius: 16rpx;
				}

				.name {
					line-height: 50rpx;
					font-size: 30rpx;
					color: #333;
				}

				.km,
				.job-title,
				.count {
					line-height: 50rpx;
					font-size: 24rpx;
					color: #999;
				}

				.number {
					color: #2984f8;
				}
			}
		}
	}

	.result-doctors-box {

		.item {
			display: flex;
			// justify-content: space-between;
			align-items: center;

			.info-box {
				flex: 1;
			}

			.name {
				margin-right: 20rpx;
			}

			.btn {
				border-radius: 30rpx;

				padding: 10rpx 30rpx;

				font-size: 28rpx;
				color: #fff;

				background-color: #2984f8;
				box-shadow: 0 0 10rpx #2984f8;
			}

			// .avatar-box {
			// 	position: relative;

			// 	.tag {
			// 		position: absolute;
			// 		bottom: 0;
			// 		left: 0;

			// 		padding: 4rpx 10rpx;

			// 		font-size: 24rpx;
			// 		color: #fff;

			// 		background-color: #fddb78;

			// 		border-radius: 16rpx;
			// 	}
			// }

		}
	}

	.search-box {
		width: 100%;
		height: 46rpx;

		padding: 30rpx 0;

		display: flex;
		justify-content: center;
		align-items: center;

		background-color: #fff;
	}

	.searchBox {
		width: 500rpx;

		display: flex;
		align-items: center;

		padding: 10rpx;

		border: 1px solid #eee;
		border-radius: 8px;
	}

	.searchImg {
		width: 32rpx;
		height: 34rpx;

		margin-right: 20rpx;
		margin-top: 5rpx;
	}

	.cancel-btn {
		margin-left: 20rpx;

		color: #999;
		font-size: 14px;
	}

	.search-input {
		color: #333;
		font-size: 14px;
	}
}
</style>